<template>
  <div class="recommend">
    <div class="recommend-item" v-for="item in recommends.slice(0, 4)" :key="item.id">
      <a href="javascript:void(0)" @click="goD(item.id)">
        <img v-lazy="item.cover_url" />
        <div class="title">{{ item.title.substring(1, item.title.length - 1) }}</div>
      </a>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
export default {
  name: "Recommend",
  props: ['recommends'],
  setup() {
    const router = useRouter()
    function goD(id) {
      router.push({
        path: 'detail',
        query: {
          id
        }
      })
    }
    return {
      goD
    }
  }
}
</script>

<style scoped lang="less">
.recommend {
  display: flex;
  flex: 1;
  width: 100vw;
}

.recommend-item {
  flex: 1;
  text-align: center;
  border-bottom: 8px solid #EEE;

  a {
    img {
      width: 70px;
      height: 70px;
    }
  }

}

.title {
  font-size: 14px;
  color: #404040;
  vertical-align: middle;

}</style>
